<template>
    <!-- 导航栏 -->
    <van-nav-bar 
        title="商品分类"
        left-text="返回"
        left-arrow
        @click-left="back"
        :fixed="true"
    />

    <div class="containe">
        <!-- 侧边栏 -->
        <van-sidebar class="type" v-model="active" @change="change">
            <van-sidebar-item v-for="item in TypeList" :title="item.name"/>
        </van-sidebar>

        <!-- 商品列表 -->
        <div class="list">
            <!-- 加载中 -->
            <van-loading class="loading" v-show="Show" size="100" color="#1989fa" vertical>
                加载中...
            </van-loading>

            <van-card
                v-for="item in ProductList"
                :tag="item.flag_text"
                :price="item.price"
                :title="item.name"
                :thumb="item.cover_cdn"
                @click="Info(item.id)"
            />

        </div>
    </div>
</template>

<script>
    export default {
        name:"TypeIndex",
        created(){
            this.TypeData()
        },
        data(){
            return {
                active:0,
                typeid:0,
                ProductList:[],
                TypeList:[],
                Show:false,
            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            change(index){
                this.typeid=this.TypeList[index].id
                this.TypeProduct()
            },
            Info(proid){
                this.$router.push({path:'/product/product/info/',query:{proid:proid}})
            },

            // 获取分类
            async TypeData(){
                var result = await this.$api.TypeIndex()
                console.log(result);

                if(result.data.length > 0){
                    this.TypeList=result.data

                    // 取到第一个分类
                    this.typeid=this.TypeList[0].id

                    // 根据分类id 获取商品
                    this.TypeProduct()
                }
            },

            // 获取分类中对于的商品
            async TypeProduct(){
                this.ProductList=[]
                this.Show=true

                var result = await this.$api.TypeProduct({typeid:this.typeid})
                this.Show=false
                console.log(result);

                if(result.data.length > 0){
                    this.ProductList=result.data
                }
            }



        }
    }
</script>

<style>
    .containe {
        padding-top: 3.5em;
        display: flex;
    }

    .containe .type {
        width: 30%;
        height: 93vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .containe .list {
        width: 100%;
        height: 93vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .containe .loading {
        text-align: center;
    }
</style>